<template>
	<view class="evalInfo">
		<view class="rate-block">
			<text class="rate-block__title">商品评分</text>
			<view class="rate-block__content">
				<view class="u-page__rate-item">
					<u-rate size="20" v-model="score" active-color="#2CB9A4" inactiveIcon="heart"
						activeIcon="heart-fill"></u-rate>
				</view>
			</view>
		</view>
		<view class="evaluateContent">
			<u--textarea v-model="evaluate" placeholder="请输入内容" count maxlength="500" height="200"></u--textarea>
		</view>
		<view class="anonymous">
			<view class="anonymousItems">
				<text class="anonymousItems_text">匿名评论</text>
				<view class="">
					<u-switch v-model="anonymous"  size="22" activeColor="#2CB9A4"></u-switch>
				</view>
			</view>
		</view>
		<view class="ful  ">
			<view class="ful-left">
				上传图片（最多九张）
			</view>
			<view class="ful-right">
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="9" @upImgs="upImgs1" ref="imgUpload1"  
					:imageArr="arrImages" :disable="type==1" :showdel="type!=1" :maxCount="9"></imgUpload>
			</view>
		</view>
		<view class="item">
			<u-button class="custom-style" text="提交" customStyle="background-color: #2CB9A4;color: #fff;width: 70%;border-radius: 30px;margin-top: 30rpx;" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		evaluateSee,
		evaluate
	} from '@/request/api.js'
	import imgUpload from '@/components/common/imgUpload.vue'
	export default {
		components: {
			imgUpload,
		},
		data() {
			return {
				score: 0,
				evaluate: '',
				anonymous: false,
				arrImages: [],
				form:{
					id:''
				},
				evaluate_images:''
			};
		},
		onLoad(res) {
			this.form.id = res.id
			this.getEvaluate()
		},
		methods:{
			async submit(){
				let anonymous = true
				if(this.anonymous == true){
					anonymous = 1
				}else{
					anonymous = 0
				}
				let data = {
					score: this.score,
					evaluate: this.evaluate,
					anonymous: anonymous,
					evaluate_images:this.evaluate_images,
					id:this.form.id
				}
				console.log(data,'传参')
				let res = await evaluate(data)
				uni.showToast({
					icon:'none',
					title:'评论成功'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
				console.log(res,'点击了评论')
			},
			async getEvaluate(){
				let res = await evaluateSee(this.form)
				this.score = res.data.score
				this.evaluate = res.data.evaluate
				this.evaluate_images = res.data.evaluate_images.toString()
				if(res.data.evaluate_images.length!=0){
					this.arrImages = res.data.evaluate_images.map(item=>{
						return {url:item}
					})
				}
				this.anonymous = res.data.anonymous == 1 ?true:false
				console.log(this.arrImages,'查看评论')
			},
			upImgs1(e) {
				let arr = e.images
				let newArr = []
				// console.log(arr)
				this.evaluate_images = arr.join(',') //门头照
				// console.log(this.formData.project_pics)
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss">
	.evalInfo {
		padding: 20rpx;
		margin: 20rpx 0;

		.anonymous {
			display: flex;
			align-items: flex-end;
			flex-direction: row-reverse;

			.anonymousItems {
				color: #BABABA;
				display: flex;
				.anonymousItems_text{
					margin-right: 20rpx;
				}
			}
		}

		.rate-block {
			display: flex;
			justify-content: space-between;

			.rate-block__title {}

			.rate-block__content {}
		}

		.evaluateContent {
			margin: 20rpx 0;
			border-bottom: 0.5px solid rgba(217, 217, 217, 0.6);
			padding-bottom: 20rpx;
		}
		.current {
			padding: 30upx;
			padding-top: 0;
		}
		.ful-left{
			// width: 20%;
		}
		.ful {
			font-size: 28upx;
			color: #4F4F4F;
			padding: 40upx 0;
		}
		
		.ful-right {
			margin-top: 20rpx;
		}
	}
</style>